<template>
  <div class="g-panel-fixed" v-if="value">
    <div class="mask" @click.stop="onCancel"></div>
    <div class="m-panel-wrap" :style="{width: width, height: height, 'border-radius': `${radius}px`}">
      <!-- 标题 -->
      <div class="panel-title clearfix" v-if="panelTitle">
        <span>{{title}}</span>
        <div v-if="showClose" class="panel-close fr" @click="onCancel">
          <img src="../../assets/close.png" alt="">
        </div>
      </div>
      <!-- 内容区域 -->
      <div class="panel-scroll">
        <!-- 内容 -->
        <w-panel>
          <slot></slot>
        </w-panel>
      </div>
      <!-- 确认和取消按钮 -->
      <div class="btn-group" v-if="showBtns">
        <w-button-group>
          <w-button type="main" @on-click="onConfirm">{{confirmText}}</w-button>
          <w-button type="colse" @on-click="onCancel">取消</w-button>
        </w-button-group>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    showClose: [Boolean], // 是否展示删除按钮
    // 控制显示
    value: [Boolean],
    // 控制是否展示标题
    panelTitle: {
      type: Boolean,
      default: false
    }, 
    // 标题文字
    title: {
      type: String,
      default: ''
    },
    // 宽度
    width: {
      type: String,
      default: '580px'
    },
    // 高度
    height: {
      type: String,
      default: '340px'
    },
    // 圆角大小
    radius: {
      type: [String, Number],
      default: 5
    },
    // 确认按钮文字
    confirmText: {
      type: String,
      default: '确认'
    },
    // 是否有操作按钮
    showBtns: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
    }
  },
  methods: {
    onCancel() {
      this.$emit('on-cancel')
      this.$emit('input', false)
    },
    onConfirm() {
      this.$emit('on-confirm')
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../../scss/_panel.scss';
@import '../../scss/_var.scss';
.panel-scroll {
  border-top: 4px solid $color-main;
}
</style>